<template>
	<view v-if="value" class="gift_getter_alert">
		<image class="fire_works" src="@/static/ring/vigor/fireworks.png" />

		<view class="v_g_main">
			<h2>恭喜获得！</h2>
			<image class="vigor_img" src="@/static/ring/vigor/giftBox.png" mode="widthFix" />
			<view class="source">
				恭喜您完成第二天佩戴任务
				<br />
				点击宝箱领取奖励！
			</view>

			<view class="button" @click="sure">确定</view>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		value: Boolean,
		info: Object,
	},
	computed: {
		vigorSource() {
			return this.info?.vigorSource || "您完成xx/xx日的健康睡眠任务";
		},
		vigorValue() {
			return this.info?.vigorValue || 0;
		},
	},

	methods: {
		sure() {
			console.log("sure");
			this.$emit("input", false);

		},
	},
};
</script>
<style lang="scss" scoped>
.gift_getter_alert {
	width: 100vw;
	height: 100vh;
	background-color: rgba($color: #000000, $alpha: 0.8);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;

	display: flex;
	justify-content: center;
	align-items: center;

	text-align: center;

	.fire_works {
		position: absolute;
		width: 90%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -52%);
		z-index: 1;
		pointer-events: none;
        height: 1064rpx;
	}

	.v_g_main {
		width: 80%;
		height: 800rpx;
		border-radius: 30rpx;
		background: linear-gradient(180deg, #dde6ff 0%, #ffffff 51.46%);
		padding: 60rpx 40rpx;

		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;

		position: relative;

		.vigor_img {
			width: 80%;
		}

		.source {
			font-weight: 400;
			font-size: 34rpx;
			text-align: center;
			line-height: 50rpx;
		}

		.button {
			background: #2359f8;
			color: white;
			width: 90%;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 20rpx;
			font-weight: 500;
			font-size: 32rpx;
			text-align: center;
		}
	}
}
</style>
